<template>
    <!--banner轮播-->
    <article class="homePage-banner-box">
        <div class="swiper-container" id="banner-swiper-container" v-show="!noDataShow">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in bannerImgItem" :key="index">
                    <a :href="item.url" target="_blank" :title="item.description" :alt="item.description">
                        <img :src="isNullImg(item.photo)" :title="item.description" :alt="item.description">
                    </a>
                </div>
            </div>
            <div class="swiper-button-next iconfont icon-you"></div>
            <div class="swiper-button-prev iconfont icon-zuo"></div>
            <ul class="swiper-pagination"></ul>
        </div>
        <div class="bannerPhotoNoData" v-show="noDataShow">
            <img src="/static/img/houseList-noData.jpg" alt="">
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                bannerImgItem: [], //banner图片数据
                mySwiper: null,
                noDataShow: false,//没有数据提示信息是否显示

            }
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取banner轮播图数据
            this.getBannerImgData();

        },
        methods: {
            // 获取banner轮播图数据
            getBannerImgData() {
                this.$get('/a/1').then(res => {
                    if (res.status == 0) {
                        this.bannerImgItem = res.data.list;
                        this.noDataShow = false;

                        this.$nextTick(() => {
                            this.mySwiper = new Swiper('#banner-swiper-container', {
                                autoplay: {
                                    delay: 5000,//自动切换的时间间隔，单位ms
                                    stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换
                                    disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                                },
                                effect: 'fade',//slide的切换效果：淡入淡出
                                spaceBetween: 0,//slide之间的距离（单位px）
                                loop: true,
                                navigation: {//前进后退按钮组件
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                                pagination: {
                                    el: '.swiper-pagination',
                                    clickable :true,
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                            });
                        })
                    }else{
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                });
            },

        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        //banner轮播
        .homePage-banner-box {
            .bannerPhotoNoData{
                text-align: center;
                background: rgba(0, 0, 0, 0.75);
                padding: 15px 0;
            }
            >.swiper-container {
                overflow: hidden;
                > .swiper-wrapper {
                    > .swiper-slide {
                        >a{
                            display: block;
                            > img {
                                width: 100%;
                                height: auto;
                                max-height: 460px;
                            }
                        }
                    }
                }
                > .swiper-button-next,
                > .swiper-button-prev {
                    top: 45%;
                    opacity: 0;
                }
                .swiper-pagination{
                    >span {
                        width: 50px;
                        height: 3px;
                        border-radius: 20px;
                    }
                    >.swiper-pagination-bullet-active{
                        background: #00b8ee;
                    }
                }
            }
            > .swiper-container:hover .swiper-button-next,
            > .swiper-container:hover .swiper-button-prev {
                opacity: 1;
            }
        }
    }
</style>
